<template>
  <section class="todoapp">
    <todoListHeader @add="add"></todoListHeader>
    <todoListBody :list="list" @del='del' @xiugai='xiugai' ></todoListBody>
    <todoListFooter ></todoListFooter>
  </section>
</template>

<script>
/* 引入 */
import todoListHeader from './components/todoListHeader.vue'
import todoListBody from './components/todoListBody.vue'
import todoListFooter from './components/todoListFooter.vue'
export default {
  /* 注册 */
  components: {
    todoListHeader,
    todoListBody,
    todoListFooter,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          content: '读万卷书',
          flag: false,
        },
        {
          id: 2,
          content: '行万里路',
          flag: false,
        },
        {
          id: 3,
          content: 'GOODSTUDY',
          flag: false,
        },
      ],
    }
  },
  methods: {
    /* 增加 */
    add(value) {
      if (value === '') return alert('输入内容不能为空')
      this.list = [
        {
          id: +new Date(),
          content: value,
          flag: false,
        },
        ...this.list,
      ]
    },
    /* 删除 */
    del(id){
      this.list = this.list.filter(item =>item.id!==id)
    },
    /* 修改 */
  xiugai(e,id){
    this.list.forEach(item =>{if(item.id===id) item.flag=e })
    
  }
  },

  
}
/* 

### 1.请简单描述一下虚拟dom和diff算法

虚拟dom是用来描述节点信息的js对象；

diff算法：同层级根元素比较 ，根元素不同删除dom树重建；根元素相同考虑复用

兄弟元素比较，如果有key值，有key值优先比较key值，如果key值相同看属性和方法相同进行对比复用；

如果有没key值，看id,属性和方法相同，进行复用



### 2.请手写v-model原理

<input type="text"   :value="value"  @input = input>
 3.请写出这几天学过的vue指令和核心配置项

v-blind;  v-for ; ：key=''  v-modle;  props  ;  
watch:{
immedite:true

deep:'  ',
}  
methods:{}

data(){
return{}
}
computed:{}
 4.请写出计算属性和监听器的完整写法

watch：{immedite:true

deep:'  ',}

computed:{}

 */
</script>

<style></style>
